import React from 'react'
import { AtList, AtListItem } from 'taro-ui'
import './index.scss'

import { CommonEventFunction } from '@tarojs/components/types/common'

interface ICList {
  title: string
  extraText?: string
  arrow?: 'right' | 'up' | 'down'
  onClick?: CommonEventFunction
  disabled?: boolean
  isarrow?: boolean
  imgSrc?: string
  note?: string
  hasBorder?: boolean
}

/**
 * 共用 list 组件
 * @param title 标题 默认 ''
 * @param note  信息描述 默认 ''
 * @param arrow 右侧箭头  'right' | 'up' | 'down' 默认 right
 * @param onClick list 单击事件
 * @param disabled 禁用 默认 false
 * @param  isarrow 是否显示箭头
 * @parm extraText  右边信息
 * @return JSX.Element
 */
export default function CList(params: ICList) {
  const { disabled = false, title = '', note = '', isarrow = false, imgSrc = '', extraText = '', hasBorder = true } = params

  return (
    <AtList hasBorder={hasBorder}>
      <AtListItem title={title} note={note} arrow={isarrow ? 'right' : ''} thumb={imgSrc} extraText={extraText} hasBorder={hasBorder} />
    </AtList>
  )
}
